<template>
	<view>
		<view class="item">
			<view class="left">
				<text>发布的人:</text>
			</view>
			<view class="right">
				<image :src="info.avatar" mode=""></image>
			</view>
		</view>

		<view :class="[userId!==info.userid?'item':'itemer']">
			<view class="left">
				<text>报名情况:</text>
			</view>
			<view class="right">
				<view @tap="toPerson(0)">男<text>{{ info.addman }}</text>/{{ info.man }}</view>
				<view @tap="toPerson(1)">女<text>{{ info.addwoman }}</text>/{{ info.woman }}</view>
			</view>
		</view>
		<view class="tis" v-if="userId==info.userid">(点击数字可查看详情)</view>

		<view class="item">
			<view class="left">
				<text>约会主题:</text>
			</view>
			<view class="right">
				{{ info.title }}
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>约会时间:</text>
			</view>
			<view class="right">
				{{ info.engagementtime }}
			</view>
		</view>

		<view class="item-place">
			<view class="place-left">
				<text>约会地点:</text>
			</view>
			<view class="place-right">
				{{ doStr(info.place) }}
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>男士最多:</text>
			</view>
			<view class="right">
				{{ info.man }}个
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>女士最多:</text>
			</view>
			<view class="right">
				{{ info.woman }}个
			</view>
		</view>

		<view class="detail">
			{{ info.describe }}
		</view>

		<view class="box" v-if="type==1" >
			<view class="end" @tap="doActive">
				确认结束
			</view>
			<!-- <view class="start">
				确认开始
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token', 'userId'])
		},
		data() {
			return {
				id: null,
				type: null,
				info: {}
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl:'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path:'/pages/index/index'
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.type = options.type;
			this.getData();

		},
		methods: {
			doActive(){
				uni.showModal({
					title:'提示',
					content:'真的确认结束吗?',
					cancelText:'取消',
					confirmText:'确认',
					success: (res) => {
						if(res.confirm){
							this.doEnd();
						}else{
							console.log('点击了取消')
						}
					}
				})
			},
			async doEnd() {
				try {
					let params = {
						token: this.token,
						orderId: this.id
					};
					let res = await this.$request.request.get('/api/engagement/change', params)
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: res.data,
							mask: true,
							duration: 1000
						});

						setTimeout(() => {
							uni.navigateBack();
						}, 1000)

					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//获取数据
			async getData() {
				try {
					let params = {
						token: this.token,
						orderId: this.id
					};
					let res = await this.$request.request.get('/api/engagement/detail', params)
					console.log(res);
					if (res.code == 200) {
						this.info = res.data;
						if (this.info.activestatus == 1) {
							this.type = 0;
						}
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			toPerson(e) {
				//判断是否本人发布的约会圈子
				if (this.userId == this.info.userid) {
					if (e == 0) {
						//男士列表
						uni.navigateTo({
							url: 'participants?type=0&id=' + this.info.id
						})
					} else {
						//女士列表
						uni.navigateTo({
							url: 'participants?type=1&id=' + this.info.id
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '仅有自己发布的约会圈子才可查看',
						showCancel: false,
						confirmText: '知道了',
						success(res) {
							console.log(res)
						}
					})
				}
			},
			//位置切割
			doStr(e) {
				if (e) {
					let arr = e.split('-');
					if (arr.length > 1) {
						return arr[1]
					} else {
						return arr[0]
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import 'dateCirclesDetail.scss'
</style>
